<template>
	<view class="survey-wrap">
		<view class="survey-item" v-for="survey in surveyList" :key="survey.value" @click="onCheck(survey)">
			<image :src="survey.isChecked ? '../../static/checked.png' : '../../static/unchecked.png'" mode="aspectFit"></image>
			<text>{{ survey.name }}</text>
		</view>
		<view class="submit-btn" @click="onSubmit">保存提交</view>
	</view>
</template>

<script>
	import { SURVEY_LIST } from '../../const.js'
	export default {
		data () {
			return {
				surveyList: SURVEY_LIST
			}
		},
		
		methods: {
			onCheck(item) {
				item.isChecked = !item.isChecked
			},
			
			onSubmit() {
				let checkedList = this.surveyList.filter(item => item.isChecked)
				
				if (!checkedList.length) {
					uni.showToast({
						icon: 'none',
						title: '请选择调查项'
					})
					return false
				}
				
				this.$store.dispatch('survey/submitSurvey', {
					checked: checkedList
				}).then(() => {
					uni.navigateTo({
						url: '../result/result'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.survey-wrap {
	
	.survey-item {
		padding: 20rpx;
		margin: 20rpx 20rpx 0;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #5a5a5a;
		height: 72rpx;
		line-height: 72rpx;
		
		image {
			display: inline-block;
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			vertical-align: middle;
		}
	}

	.submit-btn {
		width: 470rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 30rpx auto;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		background-image: linear-gradient(to right, #60d8d2, #478ce4);
		border-radius: 20rpx;
	}
}
</style>
